<template>
    <div class="count">
        <nabars style="margin: 10px 0 0px 25px;" index="0"></nabars>
        <div class="top">
            <div class="top_left">
                <Sector></Sector>
            </div>
            <div class="top_right">
                <div class="top_right_top">
                    <div class="one1" style="margin-top: 20px;padding-top: 20px;">
                        <span style="height: 35px;line-height: 35px;font-size: 18px;">群聊情况</span>
                        <div style="width: 100%;display: flex;flex-direction: column;">
                            <i class="el-icon-warning warn"></i>
                            <span class="titles">已加入群聊数量</span>
                            <div class="lineInfo">
                                <span class="info-num">{{ Group_new }}</span>
                                <span class="info-txt">日同比 <span :class="Group_judge=='1'?'info-color1':'info-color2'"><i :class="Group_judge=='1'?'el-icon-top':'el-icon-bottom'"></i>{{ Group_percentage}}%</span></span>
                                <img class="goup" v-if="Group_judge=='1'" src="../../../assets/images/goup.png"/>
                                <img class="goup" v-else src="../../../assets/images/drop.png"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top_right_bottom">
                    <div class="one2" style="margin-top: 20px;padding-top: 20px;">
                        <span style="height: 35px;line-height: 35px;font-size: 18px;">定时任务</span>
                    </div>
                    <div id="sis">
                        <div style="color: #818e96;">已完成<div class="task">{{completedTasks}}</div>
                        </div>
                        <div style="color: #818e96;">进行中<div class="task">{{ongoingTasks}}</div>
                        </div>
                        <div style="color: #818e96;">未完成<div class="task">{{unfinishedTasks}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="bottom_left">
                <div class="bottom_left_top">
                    <div class="one1" style="margin-top: 20px;padding: 20px 10px 0 20px;">
                        <div style="width: 100%;display: flex;flex-direction: column;">
                            <i class="el-icon-warning warn"></i>
                            <span class="titles">今日好友申请</span>
                            <div class="lineInfo">
                                <span class="info-num">{{ application_new }}</span>
                                <span class="info-txt">日同比 <span :class="application_img=='1'?'info-color1':'info-color2'"><i :class="application_img=='1'?'el-icon-top':'el-icon-bottom'"></i>{{ application_old!='NaN'?application_old:0 }}%</span></span>
                                <img class="goup" v-if="application_img=='1'" src="../../../assets/images/goup.png"/>
                                <img class="goup" v-else src="../../../assets/images/drop.png"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom_left_bottom">
                    <div class="one1" style="margin-top: 20px;padding: 20px 10px 0 20px;">
                        <div style="width: 100%;display: flex;flex-direction: column;">
                            <i class="el-icon-warning warn"></i>
                            <span class="titles">今日新增好友</span>
                            <div class="lineInfo">
                                <span class="info-num">{{ Friend_new }}</span>
                                <span class="info-txt">日同比 <span :class="Friend_judge=='1'?'info-color1':'info-color2'"><i :class="Friend_judge=='1'?'el-icon-top':'el-icon-bottom'"></i>{{ percentage!='NaN'?percentage:0 }}%</span></span>
                                <img class="goup" v-if="Friend_judge=='1'" src="../../../assets/images/goup.png"/>
                                <img class="goup" v-else src="../../../assets/images/drop.png"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom_right">
                <div class="bottom_right_one">
                    <Columnar></Columnar>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import moment from "moment";
import request from '@/utils/request'
import Sector from '../../../components/Sector';
import Columnar from '../../../components/Columnar'
import nabars from '../components/nabar.vue'
import mathNum from "../components/daily.js"
export default {
    data() {
        return {
            application_img: null,//好友申请判断图片
            application_new: null,//好友申请
            application_old: null,//好友申请

            Group_new: null,//群聊情况
            Group_old: null,//群聊情况
            Group_judge:'1',//群聊情况
            Group_percentage: 0,//群聊百分比

            Friend_new: null,//新增好友
            Friend_old: null,//新增好友
            Friend_judge: '1',//新增好友
            percentage: 0,//新增好友百分比
            completedTasks:0,//已完成
            ongoingTasks: 0,//进行中
            unfinishedTasks: 0,//未完成
            queryParams: {
                pageNum: 1,
                pageSize: 999,
                wcTimedTasks: {
                    taskId: null, //任务id
                    taskType: null, //任务类型 (0:添加好友任务 1：定时任务  2:群发任务)
                    msgType: null,
                    executionType: 1, //执行类型不能为空
                    executeCycle: null, //执行周期  业务字典（1：每天 2：每周 3：每月 4：每年）
                    createBy: null //创建人
                },
                finishState: null,
                startExecuteTime: null,
                endExecuteTime: null,
                startCreateTime: null,
                endCreateTime: null,
            },
        };
    },
    components: {
        nabars,
        Sector,//扇形图
        Columnar//筒状图
    },
    created() {
        var currentTime=moment().format('YYYY-MM-DD');
        var newMonth = moment(currentTime).add(-7, 'day').format('YYYY-MM-DD');
        this.queryParams.startExecuteTime=newMonth+' 00:00:00'
        this.queryParams.endExecuteTime=currentTime+' 23:59:59'
        this.group_chat();
        this.getList();
        this.task();
        this.friend_application();
    },
    methods: {
        // 群聊
        group_chat() {
            group_chat().then(res => {
                this.Group_new = res.data.new_size;
                this.Group_judge=mathNum(res.data.new_size,res.data.old_size).split('_')[0]
                this.Group_percentage=mathNum(res.data.new_size,res.data.old_size).split('_')[1]
            })
        },
        // 新增好友
        getList() {
            listWcAssistGreetInfo().then(res => {
                //console.log(res, '查看');
                this.Friend_new = res.data.new_size;
                this.Friend_old = res.data.old_size;
                this.Friend_judge=mathNum(res.data.new_size,res.data.old_size).split('_')[0]
                this.percentage=mathNum(res.data.new_size,res.data.old_size).split('_')[1]
            });
        },
        //好友申请
        friend_application() {
            friend_application().then(res => {
                //console.log(res, '查看好友申请');
                this.application_new = res.data.todayAdd;
                this.application_img=mathNum(res.data.todayAdd,res.data.yesterdayAdd).split('_')[0]
                this.application_old=mathNum(res.data.todayAdd,res.data.yesterdayAdd).split('_')[1]
            });
        },
        task() {
            task_Information(this.queryParams).then(res => {
                // 初始化三个数组来存储不同状态的任务
                let unfinishedTasks = [];  //未完成
                let ongoingTasks = [];     //进行中
                let completedTasks = [];   //已完成
                if (res.data.records) {
                    res.data.records.forEach(record => {
                        // 根据 finishState 和 executionResult 判断任务状态
                        if (record.finishState == 0) {
                            // 未完成
                            unfinishedTasks.push(record);
                        } else if (record.finishState == 1) {
                            // 进行中
                            ongoingTasks.push(record);
                        } else if (record.finishState == 2) {
                            // 已完成
                            completedTasks.push(record);
                        }
                    });
                }
                this.unfinishedTasks=unfinishedTasks.length
                this.ongoingTasks=ongoingTasks.length
                this.completedTasks=completedTasks.length
            });
        }
    }
};


// 群聊
export function group_chat() {
    return request({
        url: '/arbit/wcgroups_info/data_groups',
        method: 'get',

    })
}
// 新增好友
export function listWcAssistGreetInfo() {
    return request({
        url: '/arbit/wcfriend_info/new_friend',
        method: 'get',

    })
}
// 好友申请
export function friend_application() {
    return request({
        url: '/wxassistant/wcfriends_apply/getTodayCount',
        method: 'get',

    })
}
// 定时任务
export function task_Information(query) {
    return request({
        url: '/arbit/wctimedTasks/getPage',
        method: 'post',
        data: {
            pageNum: query.pageNum,
            pageSize: query.pageSize,
            wcTimedTasks: {
                taskId: query.wcTimedTasks.taskId, // 确保这些属性在query.wcTimedTasks中已经定义
                taskType: query.wcTimedTasks.taskType,
                msgType: query.wcTimedTasks.msgType,
                executionType: query.wcTimedTasks.executionType, // 执行类型不能为空
                executeCycle: query.wcTimedTasks.executeCycle,
                createBy: query.wcTimedTasks.createBy
            },
            finishState: query.finishState,
            startExecuteTime: query.startExecuteTime,
            endExecuteTime: query.endExecuteTime,
            startCreateTime: query.startCreateTime,
            endCreateTime: query.endCreateTime,
        }
    })
}
</script>
<style lang="scss">
.count {
    background: #f6f9fb;
}

/* 上面部分 */
.top {
    width: 100%;
    height: 400px;
    /* background: palegoldenrod; */
    margin-bottom: 20px;
}

.top .top_left {
    margin-left: 20px;
    width: 52%;
    height: 400px;
    background: white;
    border-radius: 10px;
    float: left;
    margin-top: 20px;
}

.top .top_right {
    width: 43%;
    height: 400px;
    /* background: rgb(150, 197, 150); */
    float: right;
    margin-right: 20px;


}

.top .top_right .top_right_top {
    width: 100%;
    height: 180px;
    /* background: rgb(120, 129, 120); */
    margin-bottom: 20px;
    background: white;
    border-radius: 10px;
    padding-left: 15%;

}

.top .top_right .top_right_bottom {
    width: 100%;
    height: 180px;
    /* background: rgb(164, 187, 101); */
    background: white;
    border-radius: 10px;
    padding-left: 15%;

}

/* 下面部分 */
.bottom {
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
    /* background: palegoldenrod; */
}

.bottom .bottom_left {
    margin-left: 20px;
    width: 45%;
    height: 350px;
    /* background: rgb(150, 197, 150); */
    float: left;

}

.bottom .bottom_right {
    width: 50%;
    margin-top: 20px;
    height: 330px;
    /* background: palegreen; */
    float: right;
    background: white;
    border-radius: 10px;
    margin-right: 20px;
    padding-top: 20px;
    padding-left: 120px;

}


.bottom .bottom_left .bottom_left_top {
    width: 100%;
    height: 160px;
    /* background: rgb(120, 129, 120); */
    margin-bottom: 20px;
    background: white;
    border-radius: 10px;
}

.bottom .bottom_left .bottom_left_bottom {
    width: 100%;
    height: 160px;
    /* background: rgb(164, 187, 101); */
    background: white;
    border-radius: 10px;
}

.top .top_right .top_right_top .one1 h3 {
    padding-left: 10px;
    padding-top: 10px;
}

.top .top_right .top_right_top .one1 h5 {
    padding-left: 30px;
    color: rgb(196, 190, 182);
}

/* 小方格 */
.top .top_right .top_right_top .one1 .one1_left span {
    padding-left: 30px;

}

.bottom .bottom_left .bottom_left_top .one1 .one1_left span {
    padding-left: 30px;
}

.bottom .bottom_left .bottom_left_bottom .one1 .one1_left span {
    padding-left: 30px;
}

#one {
    padding-left: 30px;
    font-size: 28px;

}

#two {
    font-size: 8px;
}

#third {
    color: green;
}


#tit1 {
    padding-left: 30px;
    color: rgb(196, 190, 182);
}

#tit {
    padding-left: 88%;
    margin: 0 0;
}

.top_right_bottom .one2 h3 {
    padding-left: 10px;
    padding-top: 10px;
}

#sis {
    width: 100%;
    height: 50%;
    /* background: red; */
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sis div {
    width: 30%;
    height: 100%;
    .task{
        margin-left: 10px; margin-top: 30px;font-size: 28px; color: #000;
    }
    /* background-color: aqua; */
}

#sis div p {

    line-height: 100%;
    color: #000;
    color: rgb(196, 190, 182);

}

#sis div span {

    font-size: 28px;
    padding-left: 5%;


}

.warn{
        margin-left: 93%;
        color: #d2d6d9;
}
.titles{
         font-size: 14px;color: #818e96;line-height: 40px;font-weight: 550;text-align: left;
}
.lineInfo{
        display: flex;
        align-items:center;
        justify-content: space-between;
        .info-num{
            font-size: 22px;
            font-weight: bold;
        }
        .info-txt{
            font-size: 15px;
            color: #687379;
            .info-color1{
               color:#18bea1;
            }
            .info-color2{
               color:#e14b44;
            }
        }
        .goup{
           width: 120px;
           height:60px;
           margin-right: 10px;
        }
     }
</style>